let webpack = require('webpack');
let path = require('path');
// bootstrap
// let bootstrapConfig = require('./webpack.bootstrap.config.js');
// html-webpack-plugin
let HtmlWebpackPlugin = require('html-webpack-plugin');
// 提起
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
// 清除
let CleanWebpackPlugin = require('clean-webpack-plugin');
// 配置变量环境
let isProd = process.env.NODE_ENV==='production';
// 开发模式 css 编译
let cssDev = ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap'];
// 生产模式 css 编译 并 提取
let cssProd = ExtractTextWebpackPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader'],
});

let cssConfig = isProd ? cssProd : cssDev;

module.exports = {
    entry: {
        'app.bundle': './src/pages/index/app.js',
        'content': './src/pages/content/content.js'
    },
    devtool: 'source-map',
    output: {
        path: path.resolve(__dirname, 'dist'),
        // filename: 'js/[name].[hash].js',
        filename: 'js/[name].js?h=[hash]',
    },
    resolve: {
        alias: {
            components  : path.resolve(__dirname, 'src/components'),
            until       : path.resolve(__dirname, 'src/until'),
            publicImage : path.resolve(__dirname, 'assast/images'),
            publicStyle : path.resolve(__dirname, 'assast/style'),
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'hello',
            filename: 'index.html',
            template: './src/pages/index/index.html',
            favicon: './assast/images/Bigmam.ico',
            minify: {
                collapseWhitespace: true,
            },
            hash: false,
            excludeChunks: ['content'],
        }),
        new HtmlWebpackPlugin({
            filename: 'content.html',
            template: './src/pages/content/content.html',
            favicon: './assast/images/Bigmam.ico',
            minify: {
                collapseWhitespace: true
            },
            hash: false,
            excludeChunks: ['app.bundle'],
        }),
        new CleanWebpackPlugin(['dist']),
        new ExtractTextWebpackPlugin({
            filename: 'style.css',
            disable: !isProd
        }),
        // 模块热加载
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),

        // 插件的使用
        new webpack.ProvidePlugin({
            jq: 'jquery',
            jQuery: 'jquery'
        })
    ],
    devServer: {
        port: 9090,
        open: true,
        hot: true,
        historyApiFallback: true
    },
    module: {
        rules: [{
            test: /\.(css|scss)$/,
            use: cssConfig
        }, {
            test: /\.(js|jsx)$/,
            use: ['babel-loader'],
            exclude: /node_modules/
        }, {
            /**
             * 打包的图片 背景 src={require('...')} import img 四种
             * 背景， import， src={require('...')} 可以直接 用file-loader 打包出来
             * img-》src='...' 用 html-loader 打包出来
             */
            test: /\.(gif|png|jpe?g|svg|eot|ttf|woff|woff2)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    // name: 'static/[name].[ext]?[hash]',
                    name: 'static/[name].[ext]?h=[hash]',
                }
            }]
        }, {
            // test: /\.(svg|eot|ttf|woff|woff2)$/,
            // use: [{
            //     loader: 'file-loader',
            //     options: {
            //         name: 'fonts/[name].[ext]',
            //     }
            // }]
        }, {
            test: /\.html$/,
            use: [{
                loader: 'html-loader',
                options: {
                    minimize: true
                }
            }]
        }]
    }
}